<template>
  <div class="qrCOde">
    <img :src="imgCode" alt="" />
  </div>
</template>
<script>
import {
  getQrCodeKey,
  getQrCode,
  checkQrCode,
  getAccountInfo
} from '@/api/login/login.js'
import { getTimeStamp } from '@/plugins/utils.js'
export default {
  data() {
    return {
      key: '', //生成二维码的Key
      imgCode: '', // 二维码
      timer: null //定时器
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      await this.getQrCodeKey() // 获取二维码key
      await this.getQrCode() // 根据key生成二维码
      await this.checkQrCode() // 获取二维码状态
    },

    async getQrCodeKey() {
      const res = await getQrCodeKey({ timestamp: getTimeStamp() })
      this.key = res.data.data.unikey
    },
    async getQrCode() {
      const res = await getQrCode({
        key: this.key,
        qrimg: true,
        timestamp: getTimeStamp()
      })
      this.imgCode = res.data.data.qrimg
    },
    async checkQrCode() {
      // 验证二维码是否过期，2秒检测一次
      this.timer = setInterval(async () => {
        // 如果定时器被清空或者已经登录了，则返回不需要检测
        if (!this.timer || this.$store.state.isLogin) return
        const res = await checkQrCode({
          key: this.key,
          timestamp: getTimeStamp()
        })
        if (res.data.code === 800) {
          // 二维码过期
          this.clearChecker()
          this.init() // 重新获取二维码
        } else if (res.data.code === 803) {
          // 授权成功
          this.clearChecker() // 登录了就不要检测二维码状态
          this.getAccountInfo()
        }
      }, 2000)
    },
    async getAccountInfo() {
      const res = await getAccountInfo()
      console.log(res)
      if (res.data.code === 200) {
        window.localStorage.setItem('userId', res.data.profile?.userId) // 保存本地账号ID
        this.$emit('getUserInfo', res.data.profile) // 向上传递用户信息
        this.$message.success('登陆成功!')
        this.$store.commit('updataLoginState', true)
      }
    },
    clearChecker() {
      // 清除定时器
      clearInterval(this.timer)
      this.timer = null
    }
  },
  beforeDestroy() {
    // 页面离开清除定时器
    this.clearChecker()
  }
}
</script>
<style lang="scss" scoped></style>
